<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-26
    	描述：需求订单-详情
    -->
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--详情-->
      <el-form-item label="订单号:">
        <el-input v-model="form.info.ordernum" :disabled="true" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="定制类型">
        <el-select v-model="form.info.order_type" placeholder="请选择" :disabled="true">
          <el-option label="全部" value="0"></el-option>
          <el-option v-for="(item, index) in orderType" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="包车类型:">
        <div class="order-code" v-if="form.info.custom_type == 1">短期</div>
        <div class="order-code" v-if="form.info.custom_type == 2">长期</div>
      </el-form-item>

      <el-form-item label="路线信息:">
        <div class="block" style="width: 30%;">
        <el-steps :active="form.info.active" :process-status="process">
          <el-step :title="form.info.star_time" description="出发时间" icon="el-icon-timer"></el-step>
          <el-step :title="form.info.end_time" description="结束时间" icon="el-icon-timer"></el-step>
        </el-steps>
        </div>
        <p style="height: 20px;"></p>
        <div class="block" style="width: 70%;">
        <el-steps >
          <el-step :title="form.info.star_address" description="起点" icon="el-icon-location"></el-step>
           <el-step  direction="vertical" v-for="(item, index) in form.info.lineInformation" :title="item.m_name"  description="停靠点" icon="el-icon-location" ></el-step>
          <el-step :title="form.info.end_address" description="终点" icon="el-icon-location"></el-step>

        </el-steps>
        </div>
      </el-form-item>

      <el-form-item label="行程安排:">
        <div class="block" style="width: 40%;">
          <el-timeline v-if="form.info.scheduling.content !=null">
            <el-timeline-item :timestamp="item.date_time" placement="top" v-for="(item,index) in form.info.scheduling.content">
              <el-card>
                <p>{{item.departure_time}} &nbsp;&nbsp;&nbsp;&nbsp; {{item.place_of_departure}}  </p>
                <p>至</p>
                <p>{{item.arrival_time}} &nbsp;&nbsp;&nbsp;&nbsp; {{item.destination}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-form-item>

      <el-form-item label="需要车辆数:">
        <div class="order-code">{{form.info.car_number}}</div>
      </el-form-item>
      <el-form-item label="车辆信息:">
        <div class="order-code" v-for="(item,index) in form.info.car">
          <span class="pl16 block" > <i class="el-icon-truck"></i> 车牌号：{{ item.car_number }} &nbsp;&nbsp;&nbsp; <i class="el-icon-user"></i> 司机：{{ item.driver_name }}</span><br />
        </div>
      </el-form-item>

      <el-form-item label="押金">
        <el-input v-model="form.info.front_money" :disabled="true" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="成本">
        <el-input v-model="form.info.cost_price" :disabled="true" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="本次费用">
        <el-input v-model="form.info.price" :disabled="true" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="结算方式:">
        <el-select v-model="form.info.settlement_type" :disabled="true">
          <el-option v-for="(item, index) in settlement_type" :key="index" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用途:">
        <el-select v-model="form.info.purpose_id" placeholder="请选择" :disabled="true">
          <el-option label="全部" value="0"></el-option>
          <el-option v-for="(item, index) in purpose" :key="index" :label="item.purpose_name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="司机费用:">
        <div class="order-code">提供：
          <span class="block" v-if="form.info.driver_price.three_meals == 1">提供司机三餐</span><br />
          <span class="block" v-if="form.info.driver_price.stay == 1">提供司机住宿</span><br />
          <span class="block" v-if="form.info.driver_price.parking == 1">提供停车位</span>
        </div>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input type="textarea" v-model="form.info.remark" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="订单状态:">
        <div class="order-code">
          <!-- <el-steps :space="200" :active="form.info.status+1" finish-status="success" process-status="process" v-if="form.info.status<2">
            <el-step title="用户未支付"></el-step>
            <el-step title="用户已支付"></el-step>
          </el-steps>
          <el-steps :space="200" :active="form.info.owner_active" finish-status="success" process-status="process" v-if="form.info.owner_status<2">
            <el-step title="车主未接单"></el-step>
            <el-step title="车主已接单"></el-step>
          </el-steps> -->
          <span class="green block">{{form.info.status_name}}</span><br />
          <span class="green block">{{form.info.owner_status_name}}</span><br />
          <span class="green block" v-if="form.info.status==1 && form.info.owner_status==1">{{form.info.travel_status_name}}</span>
        </div>
      </el-form-item>
      <el-form-item label="退单原因:" v-if="u_status>1 || o_status>1">
        <el-input type="textarea" v-model="form.info.reason" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="状态:"  v-if="u_status==3 || o_status==3">
        <el-radio-group v-model="form.status">
          <el-radio :label="2">同意</el-radio>
          <el-radio :label="4">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="驳回原因:" v-if="form.status==4">
        <el-input type="textarea" v-model="form.info.admin_reason" ></el-input>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">返回</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading" v-if="u_status==3 || o_status==3">提交</el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
  import OrderApi from '@/api/order.js';
  export default {

    data() {
      return {
        /*form表单数据*/
        form: {
          id: 0,
          info: {
            status: 0,
          },
        },
        loading: false,
        purpose: [],
        brand: [],
        info: {},
        settlement_type: [{
          'id': 1,
          'name': '现结'
        }, {
          'id': 2,
          'name': '月结'
        }],
        orderType: [{
          'id': 1,
          'name': '单位用车'
        }, {
          'id': 2,
          'name': '旅行用车'
        }, {
          'id': 3,
          'name': '个人用车'
        }],
        activeName: 1
      };
    },
    created() {
      this.form.id = this.$route.query.id;
      this.getData();
    },
    methods: {
      /*获取参数*/
      getData() {
        let self = this;
        OrderApi.carOrderDetail({
            id: self.form.id
          }, true)
          .then(res => {
            console.log(res);
            self.form.info = res.data.info;
            self.u_status = res.data.info.status;
            self.o_status = res.data.info.owner_status;
            self.purpose = res.data.purpose;
          })
          .catch(error => {

          });
      },

      /*提交*/

      onSubmit() {
        let self = this;
        let form = self.form;
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            OrderApi.editCarOrder(form, true)
              .then(data => {
                self.loading = false;
                if (data.code == 1) {
                  self.$message({
                    message: '恭喜你，修改成功',
                    type: 'success'
                  });
                  self.$router.push('/order/car_order/index');
                } else {
                  self.loading = false;
                }
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });
      },

      /*取消*/
      cancelFunc() {
        this.$router.back(-1);
      },
      /*打开弹出层*/
      userClick() {
        this.open_user = true;
      },

      /*关闭获取用户弹窗*/
      closeDialogFunc(e) {
        if (e.type != 'error') {
          this.user_info = e.params[0];
          this.form.info.user_id = e.params[0].user_id;
        }
        this.open_user = false;
      },

    }

  };
</script>

<style lang="scss" scoped>
  .basic-setting-content {}

  .product-add {
    padding-bottom: 50px;
  }

  .img {
    margin-top: 10px;
  }
</style>
